<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户管理 - 银行管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
        }
        .main-container {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #0d47a1;
            color: #fff;
            padding-top: 20px;
        }
        .sidebar .nav-link {
            color: #fff;
            padding: 10px 20px;
            border-left: 3px solid transparent;
        }
        .sidebar .nav-link:hover {
            background-color: #1565c0;
            border-left: 3px solid #fff;
        }
        .sidebar .nav-link.active {
            background-color: #1976d2;
            border-left: 3px solid #fff;
        }
        .sidebar .nav-link i {
            margin-right: 10px;
        }
        .content {
            flex: 1;
            padding: 20px;
            background-color: #fff;
        }
        .header {
            background-color: #1976d2;
            color: #fff;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            font-size: 1.5rem;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #1976d2;
            color: #fff;
            border-radius: 8px 8px 0 0 !important;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="sidebar">
            <div class="text-center mb-4">
                <h3>银行管理系统</h3>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="/admin/index">
                        <i class="fa fa-dashboard"></i> 控制台
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/admin/user/page">
                        <i class="fa fa-users"></i> 客户管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/card/page">
                        <i class="fa fa-credit-card"></i> 银行卡管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/deposit/page">
                        <i class="fa fa-money"></i> 存款业务管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/admin/trade/page">
                        <i class="fa fa-exchange"></i> 交易管理
                    </a>
                </li>
                <li class="nav-item mt-5">
                    <a class="nav-link" href="/">
                        <i class="fa fa-sign-out"></i> 退出系统
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="flex-grow-1 d-flex flex-column">
            <div class="header">
                <h1>客户管理</h1>
                <div class="d-flex align-items-center">
                    <span>欢迎，管理员</span>
                </div>
            </div>
            
            <div class="content">
                <div id="alertContainer"></div>
                
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">客户列表</h5>
                        <div>
                            <button class="btn btn-sm btn-light mr-2" id="addUserBtn">
                                <i class="fa fa-plus"></i> 添加客户
                            </button>
                            <a href="/admin/user/export" class="btn btn-sm btn-light">
                                <i class="fa fa-download"></i> 导出数据
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="searchKeyword" placeholder="输入姓名、身份证号或电话进行搜索">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" id="searchBtn">
                                        <i class="fa fa-search"></i> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>客户编号</th>
                                        <th>姓名</th>
                                        <th>身份证号</th>
                                        <th>联系电话</th>
                                        <th>地址</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="userTableBody">
                                    <!-- 数据将通过AJAX加载 -->
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                总计 <span id="totalCount">0</span> 条记录
                            </div>
                            <ul class="pagination" id="pagination">
                                <!-- 分页将通过JS生成 -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑客户模态框 -->
    <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">添加客户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <input type="hidden" id="customerId" name="customerId">
                        <div class="form-group">
                            <label for="customerName">客户姓名</label>
                            <input type="text" class="form-control" id="customerName" name="customerName" required>
                        </div>
                        <div class="form-group">
                            <label for="pid">身份证号</label>
                            <input type="text" class="form-control" id="pid" name="pid" required>
                        </div>
                        <div class="form-group">
                            <label for="telephone">联系电话</label>
                            <input type="text" class="form-control" id="telephone" name="telephone">
                        </div>
                        <div class="form-group">
                            <label for="address">地址</label>
                            <textarea class="form-control" id="address" name="address" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveUserBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 通用提示框
        function showAlert(message, type) {
            const alertDiv = $('<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                message +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span>' +
                '</button>' +
                '</div>');
            
            $('#alertContainer').append(alertDiv);
            
            setTimeout(function() {
                alertDiv.alert('close');
            }, 3000);
        }
        
        $(document).ready(function() {
            // 加载客户列表
            loadUserList();
            
            // 添加客户按钮点击事件
            $('#addUserBtn').click(function() {
                // 清空模态框表单
                $('#userForm')[0].reset();
                $('#customerId').val('');
                
                // 显示模态框
                $('#userModalLabel').text('添加客户');
                $('#userModal').modal('show');
            });
            
            // 搜索按钮点击事件
            $('#searchBtn').click(function() {
                const keyword = $('#searchKeyword').val().trim();
                loadUserList(1, 10, keyword);
            });
            
            // 保存客户按钮点击事件
            $('#saveUserBtn').click(function() {
                const customerName = $('#customerName').val().trim();
                const pid = $('#pid').val().trim();
                const telephone = $('#telephone').val().trim();
                const address = $('#address').val().trim();
                const customerId = $('#customerId').val();
                
                if (!customerName) {
                    showAlert('请输入客户姓名', 'warning');
                    return;
                }
                
                if (!pid) {
                    showAlert('请输入身份证号', 'warning');
                    return;
                }
                
                // 验证身份证号格式
                if (!/^\d{17}[\dXx]$/.test(pid)) {
                    showAlert('请输入正确的18位身份证号', 'warning');
                    return;
                }
                
                const url = customerId ? '/admin/user/update' : '/admin/user/add';
                
                // 提交表单数据
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        customerId: customerId,
                        customerName: customerName,
                        pid: pid,
                        telephone: telephone,
                        address: address
                    },
                    success: function(res) {
                        if (res.code === 200) {
                            showAlert(customerId ? '修改成功' : '添加成功', 'success');
                            $('#userModal').modal('hide');
                            loadUserList(); // 重新加载列表
                        } else {
                            showAlert(res.message || (customerId ? '修改失败' : '添加失败'), 'danger');
                        }
                    },
                    error: function() {
                        showAlert('网络错误，请稍后重试', 'danger');
                    }
                });
            });
            
            function loadUserList(page = 1, limit = 10, keyword = '') {
                // AJAX请求加载数据
                $.ajax({
                    url: '/admin/user/list',
                    type: 'GET',
                    data: {
                        page: page,
                        limit: limit,
                        keyword: keyword
                    },
                    success: function(res) {
                        if (res.code === 200) {
                            const data = res.data;
                            let html = '';
                            
                            if (data.records && data.records.length > 0) {
                                data.records.forEach(function(item) {
                                    html += '<tr>';
                                    html += '<td>' + item.customerId + '</td>';
                                    html += '<td>' + item.customerName + '</td>';
                                    html += '<td>' + item.pid + '</td>';
                                    html += '<td>' + (item.telephone || '-') + '</td>';
                                    html += '<td>' + (item.address || '-') + '</td>';
                                    html += '<td>';
                                    html += '<button class="btn btn-sm btn-primary mr-1 edit-btn" data-id="' + item.customerId + '">编辑</button>';
                                    html += '<button class="btn btn-sm btn-danger delete-btn" data-id="' + item.customerId + '">删除</button>';
                                    html += '</td>';
                                    html += '</tr>';
                                });
                            } else {
                                html = '<tr><td colspan="6" class="text-center">暂无数据</td></tr>';
                            }
                            
                            $('#userTableBody').html(html);
                            $('#totalCount').text(data.total || 0);
                            
                            // 生成分页
                            renderPagination(data.total, data.size, data.current);
                            
                            // 绑定编辑按钮点击事件
                            $('.edit-btn').click(function() {
                                const id = $(this).data('id');
                                // 获取客户信息
                                $.ajax({
                                    url: '/admin/user/info/' + id,
                                    type: 'GET',
                                    success: function(res) {
                                        if (res.code === 200) {
                                            const user = res.data;
                                            $('#customerId').val(user.customerId);
                                            $('#customerName').val(user.customerName);
                                            $('#pid').val(user.pid);
                                            $('#telephone').val(user.telephone);
                                            $('#address').val(user.address);
                                            
                                            $('#userModalLabel').text('编辑客户');
                                            $('#userModal').modal('show');
                                        } else {
                                            showAlert(res.message || '获取客户信息失败', 'danger');
                                        }
                                    },
                                    error: function() {
                                        showAlert('网络错误，请稍后重试', 'danger');
                                    }
                                });
                            });
                            
                            // 绑定删除按钮点击事件
                            $('.delete-btn').click(function() {
                                const id = $(this).data('id');
                                if (confirm('确定要删除该客户吗？')) {
                                    $.ajax({
                                        url: '/admin/user/delete/' + id,
                                        type: 'DELETE',
                                        success: function(res) {
                                            if (res.code === 200) {
                                                showAlert('删除成功', 'success');
                                                loadUserList(); // 重新加载列表
                                            } else {
                                                showAlert(res.message || '删除失败', 'danger');
                                            }
                                        },
                                        error: function() {
                                            showAlert('网络错误，请稍后重试', 'danger');
                                        }
                                    });
                                }
                            });
                        }
                    }
                });
            }
            
            // 生成分页
            function renderPagination(total, pageSize, currentPage) {
                if (!total || total <= 0) {
                    $('#pagination').empty();
                    return;
                }
                
                const totalPages = Math.ceil(total / pageSize);
                let html = '';
                
                // 上一页
                html += '<li class="page-item ' + (currentPage <= 1 ? 'disabled' : '') + '">';
                html += '<a class="page-link" href="javascript:void(0);" data-page="' + (currentPage - 1) + '">上一页</a>';
                html += '</li>';
                
                // 页码
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(totalPages, startPage + 4);
                
                for (let i = startPage; i <= endPage; i++) {
                    html += '<li class="page-item ' + (i === currentPage ? 'active' : '') + '">';
                    html += '<a class="page-link" href="javascript:void(0);" data-page="' + i + '">' + i + '</a>';
                    html += '</li>';
                }
                
                // 下一页
                html += '<li class="page-item ' + (currentPage >= totalPages ? 'disabled' : '') + '">';
                html += '<a class="page-link" href="javascript:void(0);" data-page="' + (currentPage + 1) + '">下一页</a>';
                html += '</li>';
                
                $('#pagination').html(html);
                
                // 绑定分页点击事件
                $('#pagination .page-link').click(function() {
                    const page = $(this).data('page');
                    if (page && page !== currentPage) {
                        loadUserList(page, pageSize);
                    }
                });
            }
        });
    </script>
</body>
</html> 